<template>
  <div class="content">
    <Header />
    <div class="center">
      <Sidebar />
      <div class="main-box" :style="{ width: isCollapse ? '96%' : '88%' }">
        <PageBreadcrumb />
        <transition name="fade-transform" mode="out-in">
          <router-view :key="key" class="mian-content" />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Sidebar from "@/components/Sidebar.vue";
export default {
  name: "Home",
  components: {
    Header,
    Sidebar,
  },
  computed: {
    key() {
      return this.$route.path;
    },
    //菜单栏是否折叠
    isCollapse() {
      return this.$store.state.menuCollapse;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .center {
    flex: 1;
    display: flex;
    .main-box {
      flex: 1;
      display: flex;
      flex-direction: column;

      .mian-content {
        flex: 1;
      }
    }
  }
}
</style>

